<template>
  <view class="content cus-tabbar">
    <block v-if="tabBarList.length > 0">
      <u-tabbar
        :value="activeIndex"
        @change="handleChangeTabBar"
        :inactiveColor="color"
        :activeColor="selectedColor"
      >
        <u-tabbar-item
          v-for="item in tabBarList"
          :key="item.id"
          :text="item.text"
        >
          <xh-img
            class="u-page__item__slot-icon"
            slot="active-icon"
            :src="item.selectedIconPath"
          ></xh-img>
          <xh-img
            class="u-page__item__slot-icon"
            slot="inactive-icon"
            :src="item.iconPath"
          >
          </xh-img>
        </u-tabbar-item>
      </u-tabbar>
    </block>
  </view>
</template>
<script>
import { TABBAR } from "@/const/application/config";

export default {
  components: {},
  props: {
    attribute: Object,
    styles: Object,
  },
  data() {
    return {
      color: "#000000",
      selectedColor: "#ffb72f",
      tabBarList: TABBAR,
      active: 1,
    };
  },
  mounted() {},
  created() {},
  computed: {
    activeIndex({ active, tabBarList, $Route }) {
      if (tabBarList.length > 0) {
        const path = $Route.fullPath.slice(1);
        const index = tabBarList.findIndex((item) =>
          item.pagePath.includes(path)
        );
        return index > -1
          ? index
          : tabBarList.findIndex((item) => item.id === active);
      }
      return tabBarList.findIndex((item) => item.id === active);
    },
  },
  methods: {
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          [all ? "selectAll" : "select"](selector)
          .boundingClientRect((rect) => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    },
    handleGetCusBarHeight() {
      return new Promise((resolve) => {
        this.uGetRect(".content").then((res) => {
          resolve(res.height);
        });
      });
    },
    handleChangeTabBar(e) {
      const item = this.tabBarList[e];
      this.$Router.replaceAll({
        path: item.pagePath,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100vw;
  display: block;
}
.cus-tabbar {
}

.u-page {
  padding: 0;

  &__item {
    &__title {
      color: $u-tips-color;
      background-color: $u-bg-color;
      padding: 15px;
      font-size: 15px;

      &__slot-title {
        color: $u-primary;
        font-size: 14px;
      }
    }

    &__slot-icon {
      width: 17px;
      height: 17px;
    }
  }
}
</style>
